<template>
	<view>
		<canvas id="lottiejs-canvas" canvas-id="lottiejs-canvas" class="lottiejs-canvas" type="2d"></canvas>
	</view>
</template>

<script>
	import lottie from 'lottie-miniprogram'
	onReady() {
		wx.createSelectorQuery().select('#lottiejs-canvas').fields({
			node: true,
			size: true
		}).exec(res => {
			const canvas = res[0].node;
			const ctx = canvas.getContext('2d');


			const dpr = wx.getSystemInfoSync().pixelRatio;
			canvas.width = res[0].width * dpr;
			canvas.height = res[0].height * dpr;
			ctx.scale(dpr, dpr);


			lottie.setup(canvas);
			lottie.loadAnimation({
				loop: true,
				autoplay: true,
				//animationData: animationData,
				path: this.$baseUrl + 'static/miniApp/gif.json',
				rendererSettings: {
					context: ctx,
				},
			});
		});
	}
</script>

<style scoped lang="scss">
	.lottiejs-canvas{
		width: 690rpx;
		
	}
</style>
